<script setup>
import { SearchIcon } from 'tdesign-icons-vue-next';
import axios from 'axios'
import { ref, onMounted,onUnmounted } from 'vue'
import { useQueryStore,useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
import { MessagePlugin } from 'tdesign-vue-next';
const router = useRouter()
const userStore = useUserStore()
const queryStore = useQueryStore()

const data = ref(null)
const job = ref(null)
const jobList = ref(null)
const show_position = () => {
    if(!userStore.checkToken()){
        router.push('/login')
    }
    axios.post('http://localhost:8000/user/position',{},{
        headers:{
            authentication: userStore.token,
        }
    })
    .then(resp => {
        data.value = resp.data.data
        jobList.value = resp.data.data[0].positionList
    }).catch(error => {
        ElMessage.error(error.data)
    })
}
const goodJobList = ref(null)
const goodJob = () => {
    if(!userStore.checkToken()){
        router.push('/login')
    }
    axios.post('http://localhost:8000/user/good/job',{},{
        headers:{
            authentication: userStore.token,
        }
    }).then(resp => {
        if(resp.data.code === 1){
            console.log(resp.data)
            goodJobList.value = resp.data.data
        }
    })
}
onMounted(() => {
    if(!userStore.checkToken()){
        router.push('/login')
    }
    show_position() 
    goodJob()
})
const choose = (num) => {
    jobList.value = num
}
//--------------------------------------
const images = ref([  
'/src/assests/image1.jpg',  
'/src/assests/image2.jpg',  
'/src/assests/image3.jpg',  
'/src/assests/image4.jpg'

]);  
const currentIndex = ref(0);
let intervalId = null;  

// 切换图片的函数  
const changeImage = () => {  
currentIndex.value = (currentIndex.value + 1) % images.value.length;  
}  

// 开始图片切换  
const startImageRotation = () => {  
intervalId = setInterval(changeImage, 2000);  
}  

// 停止图片切换  
const stopImageRotation = () => {  
clearInterval(intervalId);  
}  

// 组件挂载后开始图片切换  
onMounted(startImageRotation);  

// 组件卸载前停止图片切换  
onUnmounted(stopImageRotation);
//--------------------------------------
const click_job = (jobdata) => {
    queryStore.setQuery({job:jobdata})
    router.push('/select/job')
}

</script>

<template>
    <div >
        <div style="width: 800px;
        background-color: rgb(50, 176, 249);
        border-radius: 12px;
        padding: 2px;
        margin-left: 410px;
        margin-top: 200px;">
            <input class="input" v-model="job" placeholder="搜索职位" clearable type="text">
            <el-button style="background-color: rgb(50, 176, 249);
            border: 1px solid rgb(50, 176, 249);
            color: white;
            font-weight: 600;
            font-size: 24px;
            margin-left: 10px;">
                <SearchIcon style="transform: scale(1.2);margin-right: 15px;"/>搜索
            </el-button>
        </div>
        <div style="width: 1200px; margin-left: 240px;margin-top: 50px;" >
            <el-card class="shou" style="width: 310px;margin-right: 10px; height: 380px; 
            display: inline-block;
            ">                                                                              
                <div v-for="(x, index) in data" :key="index" class="father" @click="choose(x.positionList)">{{x.father}}</div>
            </el-card>
            <el-card class="shou" style="width: 850px; height: 380px;display: inline-block;">
                <div v-for="(y, index) in jobList" :key="index">
                    <div style="width: 200px;
                    float: left;
                     ">{{y.direction}}</div>
                    <div style="float: left;
                     width: 610px;
                      ">
                        <template v-for="(z, index) in y.name"
                        :key="index">
                            <el-button 
                            class="m-2" 
                            style="background-color: #EEEEEE;
                            margin-bottom: 13px;
                            margin-left: 12px; "
                            @click="click_job(z)"
                            >
                            {{z}}
                            </el-button>
                        </template>
                    </div>
                </div>
            </el-card>
        </div>
        <div style="width: 1240px;margin-left: 215px;margin-top: 50px;">
            <div style="width: 1220px; margin-bottom: 20px;
            text-align: center;font-weight: 800;
            color: rgb(39, 148, 211);
            font-size: 29px;">精选职位</div>
            <t-card v-for="(x, index) in goodJobList" :key="index" style="display: inline-block; width: 290px;margin-right: 20px;margin-bottom: 20px;">
                <div style="font-size: 18px;">{{x.job}}</div>
                <div style="margin-top: 10px;">
                    <div style="width: 85px; float: left;color: red;">{{x.salary}}</div>
                    <div style="float: left;
                    background-color: #F8F8F8;
                    width: 65px;margin-left: 5px;
                    text-align: center;
                    border-radius: 3px;">{{x.degrees}}</div>
                    <div style="
                    width: 85px; 
                    display: inline-block;
                    text-align: right;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;">{{x.city}}</div>
                </div>
                <div style="display: flex;align-items: center;">
                    <img style="background-color: aqua; width: 35px; height: 35px;border-radius: 50%;" :src=x.logo alt="">
                    <div style="display: inline-block;
                    font-size: 15px;
                    margin-left: 10px;
                    width: 196px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;">{{x.company}}</div>
                </div>
            </t-card>
        </div>
    </div>
<!-- <div id="image-container"
    style="display: inline-block;
    margin-right: 40px;">  
    <img  
        v-for="(src, index) in images"  
        :key="index"  
        :src="src"  
        :class="['image-item', { 'is-visible': currentIndex === index }]"  
        />  
</div> -->
</template>

<style scoped>
.input {  
    width: 625px;  
    height: 27px;
    padding: 10px;  
    font-size: 16px;  
    border: 1px solid rgb(50, 176, 249); /* 默认边框颜色 */  
    border-radius: 10px; /* 边框圆角 */  
    transition: all 0.3s ease; /* 平滑过渡效果 */
  }  
  

.input:focus {  
    outline: none;
  } 
.shou{
    overflow-y: auto; 
}
.shou::-webkit-scrollbar {  
    display: none;  
}
.father{
    font-size: 16px;
    padding-bottom: 15px;
    cursor: pointer;
    padding-left: 10px;
    padding-top: 10px;
    border-radius: 7px;
}
.father:hover{
    background-color: #e2e1e1;
}
.father:active{
    color: rgb(50, 176, 249);
}
/* ----------------------------------------------- */
#image-container {  
    position: relative;  
    width: 260px; /* 根据需要设置宽度 */  
    height: 400px; /* 根据图片比例设置高度，或使用padding-bottom */  
    /* padding-bottom: 56.25%; 假设图片是16:9的比例   */
    overflow: hidden;  
}
.image-item {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    /* object-fit: cover; 保持图片比例填充容器   */
    opacity: 0;  
    transition: opacity 1s;  
}  

.image-item.is-visible {  
    opacity: 1;  
}
/* ------------------------------------------------ */
</style>